<template>
  <div class="comment">
    <div class="hot" v-if="hotComments.length">
      <h2>
        <p>精彩评论</p>
      </h2>
      <div
        class="hotComments"
        v-for="(item, index) in hotComments"
        :key="index"
      >
        <img :src="item.user.avatarUrl" alt />
        <div class="comment-content">
          <div class="comment-user">
            <span class="name">{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div
            class="beReplied comment-user"
            v-for="(item, index) in item.beReplied"
            :key="index"
          >
            <span class="name">@{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div class="comment-time">{{ item.time | unix2Time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotComments: [],
      page: 1, //页码
      showlaoding: true, //是否显示loading效果
      load: "",
    };
  },
  mounted() {
    this.load = this.$loading.show();
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scorll, true);
  },
  methods: {
    init() {
      this.getdata();
      this.$el && window.addEventListener("scroll", this.scorll, true);
    },
    scorll(e) {
      let dom = document.querySelector(".comment");
      //文档内容实际高度（包括超出视窗的溢出部分）
      let scrollHeight = dom && Math.max(dom.scrollHeight, dom.scrollHeight);
      //滚动条滚动距离
      let scrollTop = e.target.scrollTop;
      //窗口可视范围高度
      let clientHeight = window.innerHeight;
      if (dom && clientHeight + scrollTop - 150 >= scrollHeight) {
        if (!this.showlaoding) {
          //防止多次加载
          this.load = this.$loading.show();
          this.getdata((this.page += 1));
        }
      }
    },
    getdata() {
      this.showlaoding = true;
      let id = this.$route.params.id;
      let type = this.$route.params.type;
      this.$api
        .hotcomment({ id, type, offset: (this.page - 1) * 20 })
        .then((res) => {
          this.hotComments = this.hotComments.concat(res.hotComments);
          res.hotComments.length
            ? (this.showlaoding = false)
            : (this.showlaoding = true);
          this.load.hide();
        });
    },
  },
};
</script>
<style lang="less" scoped>
.comment {
  padding: 10px 20px;
  overflow-y: scroll;
  height: inherit;
  .hot {
    font-size: 14px;
    margin-top: 10px;
    p {
      border-bottom: 1px solid #e1e1e2;
      padding-bottom: 10px;
    }
    .hotComments {
      display: flex;
      margin-top: 5px;
      padding-bottom: 5px;
      position: relative;
      border-bottom: 1px solid #e1e1e2;
      padding: 10px 0;
      &:last-child {
        border-bottom: none;
      }
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid #e1e1e2;
        vertical-align: top;
        cursor: pointer;
      }
      .comment-content {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .comment-user {
          letter-spacing: 1px;
          .name {
            color: cornflowerblue;
          }
        }
        .beReplied {
          background-color: #f1f1f4;
          color: #666;
          margin-top: 5px;
          padding: 10px 0 10px 5px;
        }
        .comment-time {
          margin-top: 5px;
          color: #a599b1;
        }
      }
    }
  }
}
</style>
